<template>
    <div class="body-box">
        <div class="putfile-box">
            <!-- <input class="" type="text" v-model="file_name"> -->
            <el-input style="width: 350px;" placeholder="请输入文件名称获取内容" v-model="file_name">
                <template slot="append">.json</template>
            </el-input>
            <el-button style="margin-left: 10px;" type="primary" @click="takeFlie">获取内容<i
                    class="el-icon-upload el-icon--right"></i></el-button>
            <!-- <button type="button" @click="takeFlie">按钮</button> -->
        </div>
        <div class="jsonv-box">
            <!-- @json-change="onJsonChange" -->
            <vue-json-editor v-model="file_content" :showBtns="true" :mode="'tree'" lang="zh" :expandedOnStart="true"
                @json-save="saveFlie" />
        </div>
    </div>
</template>
<script>
    import vueJsonEditor from 'vue-json-editor'
    import axios from 'axios'
    // import '@/styles/jsoneditor.css'

    export default {
        name: "JsonEdit",
        components: { vueJsonEditor },
        data() {
            // var title;
            return {
                file_content: null,
                file_name: null
            };
        },
        methods: {

            // 获取文件数据
            takeFlie() {
                // this.getList()
                // this.title = this.readFile('../../assets/bc_img/test.txt')
                // console.log(this.title)
                console.log(this.file_name);
                axios.get(`http://localhost:8080/index/${this.file_name}`)
                    .then((response) => {
                        console.log(response.data);
                        this.file_content = response.data;
                        this.$message({
                            message: '文件内容获取成功！！',
                            type: 'success'
                        });
                    })
                    .catch(function (error) {
                        console.log(error);
                        this.$message.error('错了哦，未能成功获取到文件内容！！');
                    })
            },

            // 保存文件数据
            saveFlie() {
                console.log("这是更改后的数", this.file_content);

                axios.post(`http://localhost:8080/${this.file_name}`, this.file_content)
                    .then(function (response) {
                        console.log(response);
                        this.$message({
                            message: '文件内容保存成功！！',
                            type: 'success'
                        });
                    })
                    .catch(function (error) {
                        console.log(error);
                        this.$message.error('错了哦，未能成功保存文件内容！！');
                    })
            }
        },
    }
</script>
<style scoped>
    .body-box {
        width: 100%;
    }

    .body-box .putfile-box {
        width: 100%;
        height: 100px;
        display: flex;
        /* justify-content: center; */
        align-items: center;
        border: 1px solid red;
        background: #fff;
        border: 1px solid #ccc;
        /* background-image: url(../../assets/bc_img/test.txt); */
    }
</style>